<template>
  <su-popup
    :show="state.show"
    @close="onCancel"
    round="40"
  >
    <view class="header-title">分账签约</view>
    <view class="whole bg-white">
      <image
        @tap="saveImg"
        class="img-code"
        :src="state.sign_img"
        mode="widthFix"
      />
      <view class="tip">点击图片前往签约</view>
      <view
        class="flex"
        style="margin-top:100rpx"
      >
        <button
          class="ss-reset-button btn-back"
          @tap="onCancel"
        >返回</button>
      </view>
    </view>
  </su-popup>
</template>

<script setup>
import throttle from '@/sheep/helper/throttle.js';
import {
  computed,
  reactive,
  onMounted,
  inject,
  ref,
  watch
} from 'vue';
import {
  onLoad
} from '@dcloudio/uni-app';

import {
  isEmpty
} from 'lodash';
import sheep from '@/sheep';
import data from '@/pages/etc/data';
const emits = defineEmits(['cancel', 'end']);
const props = defineProps({});
const state = reactive({
  show: false,
  sign_img: 'https://h5.leshuazf.com/wap/unified-contract-signing-h5/#/loading?source=baseweb&token=1fa10287df6d47aa837dddfe01c2c62d&requestId=2025042416390524176',
});
const open = (obj) => {
  state.show = true
  getImgUrl(obj)
}
const getImgUrl = (obj) => {
  let QRcodeTool = 'https://pageandy.liuliangbenben.top/qrcode/build?text='
  let url = QRcodeTool + encodeURIComponent(obj.contractUrl)
  state.sign_img = url
}

const saveImg = (url) => {
  console.log('state.sign_img', state.sign_img)
  if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
    sheep.$helper.toast('请长按图片保存');
    return;
  }
  uni.downloadFile({
    url: state.sign_img,
    success: (sres) => {
      console.log(sres);
      uni.saveImageToPhotosAlbum({
        filePath: sres.tempFilePath,
        success: (res) => {
          sheep.$helper.toast('保存成功');
        },
        fail: (err) => {
          sheep.$helper.toast('保存失败');
          console.log('图片保存失败:', err);
        },
      });
    }
  }).onProgressUpdate((res) => {
    uni.showLoading({
      title: '正在保存...'
    })
    if (res.progress == 100) {
      uni.hideLoading()
    }
  })
};

function showModal (msg) {
  uni.showModal({
    title: '提示',
    content: msg,
    showCancel: false,
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定');
      }
    }
  });
}

const onCancel = () => {
  state.show = false
};
defineExpose({
  open,
})
onMounted(async () => {
})
</script>

<style lang="scss" scoped>
.header-title {
  font-size: 30rpx;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  color: #202020;
  display: flex;
  justify-content: center;
  margin-top: 60rpx;
}
.whole {
  height: 1000rpx;
  border-radius: 40rpx 40rpx 0 0;
  padding: 70rpx 36rpx 60rpx 36rpx;
  text-align: center;
  box-sizing: border-box;
  .top-step {
    padding: 0 146rpx;
    position: relative;
    margin-bottom: 64rpx;
  }
  .line {
    position: absolute;
    width: 100rpx;
    height: 4rpx;
    background: #d8d8d8;
  }
  .flex {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .circle {
    background: linear-gradient(270deg, #003ad9 0%, #3dc8ff 100%);
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    line-height: 40rpx;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    position: relative;
    .dec {
      transform: translateX(-45%);
      bottom: -50rpx;
      position: absolute;
      font-size: 28rpx;
      color: #3d3d3d;
      width: max-content;
    }
  }
  .img-code {
    width: 600rpx;
    height: 600rpx;
    border-radius: 20rpx;
    // background:#ccc;
  }
  .tip {
    font-family: Source Han Sans;
    font-size: 28rpx;
    font-weight: bold;
    margin-top: 10rpx;
    text-align: center;
  }
  .btn-back {
    width: 300rpx;
    height: 100rpx;
    border-radius: 50rpx;
    font-size: 40rpx;
    border: 2px solid #d8d8d8;
    color: #3d3d3d;
  }
  .btn-next {
    width: 300rpx;
    height: 100rpx;
    border-radius: 50rpx;
    font-size: 40rpx;
    color: #fff;
    border: 2px solid linear-gradient(270deg, #003ad9 0%, #3dc8ff 100%);
    background: linear-gradient(270deg, #003ad9 0%, #3dc8ff 100%);
  }
  .noact {
    opacity: 0.4;
  }
}

.ss-reset-button {
  padding: 0;
  margin: 0;
  font-size: inherit;
  background-color: transparent;
  color: inherit;
  position: relative;
  border: 0rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: baseline;
  transform: translate(0, 0);
}
.ss-reset-button.button-hover {
  transform: translate(1px, 1px);
  background: none;
}

.ss-reset-button::after {
  border: none;
}
.btn-next[disabled] {
  background: rgba(115, 121, 136, 0.4) !important;
}
</style>